<template>
    <div style="width:94%;margin:auto">
        <div style="border-bottom: 1px solid;">
            <h3>准备付款</h3>
        </div>
        <div style="margin-top:10px">
            <div style="margin-top:10px">
                <el-input v-model="ordid" disabled>
                    <template slot="prepend">订单号</template>
                </el-input>
            </div>
            <div style="margin-top:10px">
                <el-input v-model="addr" :disabled="disabled">
                    <template slot="prepend">收货地址</template>
                </el-input>
            </div>
            <div style="margin-top:10px">
                <el-input v-model="phone" :disabled="disabled">
                    <template slot="prepend">收货电话</template>
                </el-input>
            </div>
            <div style="margin-top:10px">
                <el-button>付款状态</el-button>
                <el-button  @click="payment" :type="type">{{paymentStatus}}</el-button>
            </div>
        </div>
        <hr>
        <div style="margin:10 0px">
            <el-table border :data="orders">

                <el-table-column  label="图片" min-width="20%">
                    <template slot-scope="scope">
						<div style="width: 80px;height: 80px;">
							<img v-bind:src="`${imgUrl}/api/public/showImg/${scope.row.picture}`"
								style="width: 80px; height: 80px;" />
						</div>
					</template>
                </el-table-column>

                <el-table-column  prop="name" label="商品名称" min-width="35%">
			    </el-table-column>

                <el-table-column  prop="price" label="商品价格" min-width="15%">
			    </el-table-column>

                <el-table-column  prop="num" label="商品数量" min-width="15%">
			    </el-table-column>

                <el-table-column  label="商品总价" min-width="15%">
                    <template slot-scope="scope">
                        {{scope.row.num*scope.row.price}}
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="支付金额" :visible.sync="centerDialogVisible" close-on-press-escape width="20%" center>
                <div style="text-align:center;">
                    <img style="width:200px;height:250px" src="./2.png">
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="pay();centerDialogVisible = false">确认支付</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        name:'',
        props:[],
        data() {
            return {
                orders:[],
                ordid:'',
                addr:'',
                phone:'',
                paymentStatus:"未付款,点击这里去扫描付款",
                type:"primary",
                centerDialogVisible:false,
				cartids:[],
				disabled:false
            }
        },
        methods:{
            //付款
            payment(){
                if(this.paymentStatus == "付款完成"){
                    return;
                }
				if(	
					(this.addr=="" || this.addr==null) || 
					(this.phone=="" || this.phone==null)
				){
					this.$message.error("收货地址和电话都不能为空")
					return;
				}
                this.centerDialogVisible = true
            },
            pay(){
                var order = {ordid:this.ordid,ispay:1,addr:this.addr,phone:this.phone}
                var _this = this
                this.$postJson("/api/fore/ord/addPay",order)
                .then(function(resp){
                    _this.type = "success"
                    _this.paymentStatus = "付款完成"
					_this.disabled = true
                    _this.$message({
                        message: '支付完成',
                        type: 'success'
                    });
                    _this.$postJson("/api/fore/ord/addAddr",order)
                    .then(function(resp){})
					_this.$get("/api/fore/cart/delCart/"+id).then(
						function(resp){}
					)
					this.$router.push({path:"/fore/cart/cart"})
                })
            },
		},
        mounted(){
            var ordid = this.$route.query.ordid
            this.addr = this.$route.query.addr
            this.phone = this.$route.query.phone
            this.ordid = ordid
            var _this = this;
            this.$get("api/fore/ord/findInfoByOrdid/"+ordid)
            .then(function(resp){
                _this.orders = resp.data.data.items
            })
        }
    }
</script>
<style scoped="scoped">

</style>
